<script setup lang="ts" name="Detail">
import {ref, reactive, toRefs} from 'vue'
import sortApi from "@/api/sort.ts";
import publicityApi from "@/api/publicity.ts";
import {useRouter} from 'vue-router'
import {showToast} from "vant";
import useClipboard from "vue-clipboard3";

// 声明事件
const emit = defineEmits(['closePopup'])

const router = useRouter();
const {toClipboard} = useClipboard();
const dataFormId = ref(0)
const dataForm = ref({
  title: '',
  accountNumber: '',
  password: '',
  mailbox: '',
  userName: '',
  nickname: '',
  company: '',
  secretSecurity1: '',
  secretSecurity2: '',
  secretSecurity3: '',
  site: '',
  otherInformation: '',
  remark: '',
  sortId: 0,
  sortName: '',
})

const state = reactive({
  fullscreenLoading: false,
  sortList: [],
  passwordStatus: false
})
const init = (id: number) => {
  dataFormId.value = id
  state.fullscreenLoading = true
  getSortList()
  loadData()
}

// 获取分类列表
const getSortList = async () => {
  const {data} = await sortApi.getTreeList()
  sortList.value = data
}
// 加载数据
const loadData = () => {
  //fullscreenLoading.value = true
  publicityApi
      .getDetail(dataFormId.value)
      .then(({data}) => {
        dataForm.value = data
      })
      .finally(() => {
        state.fullscreenLoading = false
      })
}
const copyHandle = (value: string) => {
  toClipboard(value);  //实现复制
  showToast({
    message: '已复制',
    duration: 1000,
  });
}
const editHandle = (id: number) => {

  router.push({path: `/serve/publicity/edit/${id}`}).then(() => {
    emit('closePopup')
  })
}
const {
  fullscreenLoading,
  sortList,
  passwordStatus
} = toRefs(state)
defineExpose({
  init
})
</script>

<template>
  <div class="publicity_warp app_content">
    <div class="van-nav-bar__content">
      <div class="bar_title">{{ dataForm.title }}</div>
      <div class="van-nav-bar__right van-haptics-feedback">
        <van-icon name="edit" size="20" @click="editHandle(dataFormId)"/>
      </div>
    </div>

    <van-overlay style="display: flex;justify-content: center;align-items: center" :show="fullscreenLoading">
      <van-loading/>
    </van-overlay>
    <div class="warp_body">
      <van-form colon>
        <van-cell-group inset>
          <van-field v-model="dataForm.title" name="title" label="标题" placeholder="请输入标题" readonly
                     autocomplete="off"
                     @click="copyHandle(dataForm.title)"/>
          <van-field v-model="dataForm.accountNumber" name="accountNumber" label="账号" placeholder="请输入账号"
                     autocomplete="off"
                     readonly @click="copyHandle(dataForm.accountNumber)"/>
          <van-field v-model="dataForm.password" name="password" label="密码" placeholder="请输入密码"
                     autocomplete="off"
                     :right-icon="!passwordStatus?'closed-eye':'eye-o'" :type="!passwordStatus?'password':'text'"
                     @click-right-icon="passwordStatus=!passwordStatus" readonly
                     @click="copyHandle(dataForm.password)" @click-right-icon.stop=""/>
          <van-field v-model="dataForm.mailbox" name="mailbox" label="邮箱" placeholder="请输入邮箱" readonly
                     autocomplete="off"
                     @click="copyHandle(dataForm.mailbox)"/>
          <van-field v-model="dataForm.userName" name="userName" label="用户名" placeholder="请输入用户名" readonly
                     autocomplete="off"
                     @click="copyHandle(dataForm.userName)"/>
          <van-field v-model="dataForm.nickname" name="nickname" label="昵称" placeholder="请输入昵称" readonly
                     autocomplete="off"
                     @click="copyHandle(dataForm.nickname)"/>
          <van-field v-model="dataForm.company" name="company" label="开发公司" placeholder="请输入开发公司" readonly
                     autocomplete="off"
                     @click="copyHandle(dataForm.company)"/>
          <van-field v-model="dataForm.secretSecurity1" name="secretSecurity1" label="密保问题1" autocomplete="off"
                     placeholder="请输入密保问题1" readonly @click="copyHandle(dataForm.secretSecurity1)"/>
          <van-field v-model="dataForm.secretSecurity2" name="secretSecurity2" label="密保问题2" autocomplete="off"
                     placeholder="请输入密保问题2" readonly @click="copyHandle(dataForm.secretSecurity2)"/>
          <van-field v-model="dataForm.secretSecurity3" name="secretSecurity3" label="密保问题3" autocomplete="off"
                     placeholder="请输入密保问题3" readonly @click="copyHandle(dataForm.secretSecurity3)"/>
          <van-field v-model="dataForm.site" name="site" label="网站" placeholder="请输入网站" readonly
                     autocomplete="off"
                     @click="copyHandle(dataForm.site)"/>
          <van-field v-model="dataForm.otherInformation" name="otherInformation" label="其他信息" type="textarea"
                     autocomplete="off"
                     placeholder="请输入其他信息" readonly @click="copyHandle(dataForm.otherInformation)"/>
          <van-field v-model="dataForm.remark" name="remark" label="备注" type="textarea" placeholder="请输入备注"
                     autocomplete="off"
                     readonly @click="copyHandle(dataForm.remark)"/>
          <van-field v-model="dataForm.sortName" name="sortName" label="分类" placeholder="请选择分类" autocomplete="off"
                     readonly/>
        </van-cell-group>

      </van-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.app_content {
  .warp_body {
    margin-bottom: 10px;
  }

  .bar_title {
    max-width: 60%;
    margin: 0 0 0 25px;
    color: var(--van-nav-bar-title-text-color);
    font-weight: var(--van-font-bold);
    font-size: var(--van-nav-bar-title-font-size);
  }
}

</style>
